<!--  frame 模板 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>商城</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css" />

	<style>
		body {
			background-color: #f5f5f5;
		}
		/* 头部导航 */

		.head {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			display: flex;
			align-items: center;
			height: 0.95rem;
			background-color: #ff502d;
			z-index: 200;
		}

		.hd_icon {
			position: relative;
			font-size: 0.42rem;
			color: #fff;
			margin: 0 0.34rem;
		}

		.corner {
			position: absolute;
			right: -0.10rem;
			top: -0.10rem;
			min-width: 0.28rem;
			height: 0.28rem;
			line-height: 0.28rem;
			text-align: center;
			font-size: 0.20rem;
			color: #fff;
			border-radius: 50%;
			background: #FF8732;
			padding: 0.03rem;
		}

		.search {
			display: flex;
			align-items: center;
			width: 6.0rem;
			height: 0.60rem;
			background-color: #fff;
			border-radius: 0.30rem;
		}

		.search_text {
			flex: auto;
			font-size: 0.28rem;
			color: #e5e5e5;
		}

		.search_icon {
			font-size: 0.38rem;
			color: #eee;
			margin: 0 0.20rem;
		}

		.h_input {
			width: 4.60rem;
			font-size: 0.28rem;
			color: #666;
		}

		input[type="search"] {
			-webkit-appearance: none;
		}

		input::-webkit-search-cancel-button {
			display: none;
		}

		.placehold {
			color: #e5e5e5;
			font-size: 0.28rem;
		}

		.hhEmpty {
			display: block;
			padding: 1rem 0;
			font: 0.30rem/1em "";
			color: #ddd;
			text-align: center;
		}
		/* 内容展示 */

		.shop_box {
			display: flex;
			margin-top: 0.95rem;
		}
		/* 菜单导航栏 */

		.left_nav_item {
			width: 1.80rem;
			text-align: center;
		}

		.left_nav_title {
			font-size: 0.30rem;
			color: #333;
			line-height: 0.30rem;
			font-weight: bold;
			padding: 0.40rem 0;
			background-color: #f5f5f5;
		}

		.left_nav_box {
			background-color: #fff;
			border-radius: 0 0.14rem 0.14rem 0;
		}

		.left_bar {
			position: relative;
			background-color: #fff;
			border-radius: 0 0.14rem 0.14rem 0;
		}

		.left_nav_content {
			font-size: 0.28rem;
			color: #333;
			line-height: 0.30rem;
			padding: 0.42rem 0;
		}

		.active {
			color: #ff502d;
		}

		.left_span {
			position: absolute;
			left: 0;
			top: 0.28rem;
			width: 0.14rem;
			height: 0.50rem;
			background: #ff502d;
			border-radius: 0.07rem;
		}
		/* 商片展示区 */

		::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}

		.scroll {
			margin: 0 0.27rem;
			background-color: #f5f5f5;
		}

		.scroll-view {
			width: 5.17rem;
		}

		.shop_list {
			font-size: 0;
		}

		.shop_title {
			font-size: 0.28rem;
			color: #333;
			line-height: 0.30rem;
			text-align: center;
			background-color: #f5f5f5;
		}

		.padding {
			padding: 0.40rem 0;
		}

		.imgList_box {
			padding-bottom: 0.36rem;
			border-radius: 0.10rem;
			background-color: #fff;
		}

		.imgList {
			display: inline-block;
			margin: 0.30rem 0 0 0.25rem;
		}

		.shop_text {
			font-size: 0.28rem;
			color: #333;
			line-height: 0.30rem;
			text-align: center;
			background-color: #fff;
			margin: 0.23rem 00.10rem 0;
		}

		.shop_img {
			width: 2.20rem;
			height: 2.21rem;
			border-radius: 0.10rem;
		}
		/* 购物车 */

		.cart_box {
			height: 0.90rem;
			width: 0.90rem;
			line-height: 0.90rem;
			text-align: center;
			background: #fff;
			border-radius: 50%;
			position: fixed;
			right: 0.25rem;
			bottom: 0.40rem;
		}

		.shopping_cart {
			position: relative;
		}

		.shop_cart {
			font-size: 0.46rem;
			color: #818181;
		}

		.shop_num {
			position: absolute;
			right: -0.15rem;
			top: -0.10rem;
			width: 0.40rem;
			height: 0.40rem;
			line-height: 0.40rem;
			font-size: 0.24rem;
			color: #fff;
			border-radius: 50%;
			background: #FF502D;
		}
	</style>
</head>

<body>
	<div class="content app" v-cloak>
		<!-- 头部导航 -->
		<div class="head">
			<div class="iconfont iconxiaoxi1 hd_icon" @click="getNotice">
				<div v-if="count<100">
					<div v-if="count!=0">
						<div class="corner">{{count}}</div>
					</div>
					<div v-else></div>
				</div>
				<div v-else-if="count>=100">
					<div class="corner">99+</div>
				</div>
			</div>
			<form action="javascript:;" class="search">
				<div class="iconfont iconsousuo search_icon"></div>
				<input style="border:none;" @keyup.13="SearchConfirm" type="search" class="h_input" v-model="search" value="" placeholder="输入相关商品名称来进行搜索" placeholder-class="placehold"></input>
			</form>
		</div>

		<div class="shop_box">
			<!-- 菜单 -->
			<div class="left_nav">
				<div style="overflow-y:scroll;width:1.80rem;" :style="{height:wHeight+'px'}">
					<div class="left_nav_item">
						<div class="left_nav_title">
							预售产品
						</div>
						<div class="left_nav_box">
							<div class="left_bar" @click="switchNav(index)" v-for="(item,index) in presale" :key="index">
								<div class="left_nav_content" :class="(num==index&&checked!=1?'active':'')">{{item.type_name}}</div>
								<div :class="(num==index&&checked!==1?'left_span':'')"></div>
							</div>
						</div>
					</div>

					<div class="left_nav_item">
						<div class="left_nav_title">
							普通产品
						</div>
						<div class="left_nav_box">
							<div class="left_bar" @click="switchNav2(index)" v-for="(item,index) in ordinary" :key="index">
								<div class="left_nav_content" :class="(idx==index&&checked!=2?'active':'')">{{item.type_name}}</div>
								<div :class="(idx==index&&checked!==2?'left_span':'')"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 商品 -->
			<div class="shop" v-if="!isSearch">
				<div class="scroll">
					<div class="scroll-view" style="overflow-y:scroll;" :style="{height:wHeight+'px'}">
						<div class="shop_list" v-for="(item,index) in shop.sub_type" :key="index">
							<div class="shop_title padding">{{item.type_name}}</div>
							<div class="imgList_box">
								<div class="imgList" v-for="(item,index) in item.products" :key="index">
									<img class="shop_img" :src="item.image_center+'?imageView2/1/w/110/h/110'" @click="fnShopDetail(item.id)"></img>
									<div class="shop_text">{{item.product_name}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 搜索商品结果 -->
			<div class="shop" v-else>
				<div class="scroll">
					<div class="scroll-view" style="overflow-y:scroll;" :style="{height:wHeight+'px'}">
						<div class="shop_list padding">
							<div class="imgList_box">
								<div class="imgList" v-for="(item,index) in searchList" :key="index">
									<img class="shop_img" :src="item.image_center+'?imageView2/1/w/110/h/110'" @click="fnShopDetail(item.id)"></img>
									<div class="shop_text">{{item.product_name}}</div>
								</div>
								<div class="hhEmpty" v-if="!searchList.length">没有搜索到相应的商品</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 购物车 -->
		<div class="cart_box" @click="shop_cart">
			<div class="shopping_cart">
				<div class="iconfont iconcart shop_cart"></div>
				<div v-if="CartNum!=''">
					<div class="shop_num" v-if="CartNum<100">{{CartNum}}</div>
					<div class="shop_num" v-else>99+</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	window.addEventListener("apiready", function() {

		height = api.pageParam.height - 46
		index()
	});
	var height;

	function index() {
		var vm = new Vue({
			el: ".app",
			data: {
				products: [],
				ordinary: [],
				presale: [],
				shop: [],
				checked: '', //选中状态
				num: '',
				idx: '',
				isSearch: false,
				wHeight: height,
				searchList: [],
				search: '',
				CartNum: '',
				count: '',
			},
			mounted: function() {
				this.getMall()
				this.setCustomRefreshHeaderInfo()
				this.getNumber()
				this.CartNumInit()
				api.addEventListener({
					name: 'shopType'
				}, function(ret, err) {
					if (ret.value == 2) {
						vm.shop = vm.presale[0]
						vm.checked = 2
						vm.num = 0
					} else if (ret.value == 1) {
						vm.shop = vm.ordinary[0]
						vm.checked = 1
						vm.idx = 0
					}
				});

				//监听购物车数量变化
				api.addEventListener({
				    name: 'evt_CartChange'
				}, function(ret, err){
				    vm.CartNumInit()
				});

			},
			methods: {
				//下拉刷新
				setCustomRefreshHeaderInfo: function() {
					api.setCustomRefreshHeaderInfo({
						bgColor: '#ff502d',
						tips: {
							pull: '下拉刷新',
							threshold: '松开立即刷新',
							load: '正在刷新'
						}
					}, function() {
						vm.getMall() //获取商城信息
						vm.getNumber() //更新未读消息
						vm.CartNumInit() //获取购物车数量
					});
				},

				//获取商品列表
				getMall: function() {
					AjaxSafe({
						url: '/xapp/app/product/mall',
						loader: true,
						success: ret => {
							if (ret.state) {
								//console.log(ret.data)
								const products = [];
								let ordinary_product = (ret.data.ordinary_product || []).map(item => {
									(item.sub_type || []).forEach(type => {
										(type.products || []).forEach(product => {
											products.push(product);
										});
									});
									return item
								})
								let presale_product = (ret.data.presale_product || []).map(item => {
									(item.sub_type || []).forEach(type => {
										(type.products || []).forEach(product => {
											products.push(product);
										});
									});
									return item
								})

								vm.products = products

								vm.ordinary = ordinary_product

								vm.presale = presale_product

								vm.shop = presale_product[0]

								vm.checked = 2

								vm.num = 0

							}
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
						},
						failed: function(err) {
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
							alert("网络故障！");
						}
					})
				},

				//预售选中
				switchNav: function(idx) {
					vm.num = idx;
					vm.checked = 2;
					vm.isSearch = false;
					vm.shop = vm.presale[idx];
				},

				//普通选中
				switchNav2: function(idx) {
					vm.idx = idx;
					vm.checked = 1;
					vm.isSearch = false;
					vm.shop = vm.ordinary[idx];
				},

				//获取购物车
				CartNumInit() {
					if(localdata.get("userinfo") ){
						AjaxSafe({
							url: '/xapp/app/product/myCart',
							loader: false,
							success: function(ret){
								//alert(ret.data)
								vm.CartNum=(ret.data||[]).length
							}
						})
					}
				},

				//获取未读条数信息
				getNumber: function() {
					if(localdata.get("userinfo") ){
						AjaxSafe({
							url: '/xapp/user/commentReply',
							data: {
								page: 1,
								size: 20
							},
							loader: false,
							success: ret => {
								//alert(ret.count)
								vm.count = ret.count
							},
							failed: function(err) {
								alert("网络故障！");
							}
						})
					}
				},


				//打开消息
				getNotice: function() {
					if( !localdata.get("userinfo") ){//未登录提示跳转登录界面
						TS_UserLogin()
						return
					}
					api.openWin({
						name: 'give_notice',
						url: './give_notice.html',
						pageParam: {
							name: 'test'
						}
					});
				},

				//打开商品详情
				fnShopDetail: function(id) {
					if( !localdata.get("userinfo") ){//未登录提示跳转登录界面
						TS_UserLogin()
						return
					}
					api.openWin({
						name: 'commodity_detail',
						url: './commodity_detail.html',
						pageParam: {}
					})
					localdata.set('productId', id)
				},

				//点击键盘搜索按钮
				SearchConfirm: function() {
					vm.isSearch = vm.search != '';
					if (vm.search != '') {
						vm.searchList = vm.products.filter(item => {
							return item.product_name.indexOf(vm.search) >= 0;
						})
					}
				},

			},

		});
	}
</script>

</html>
